<template>
  <h2>依赖注入 - {{ name }} - <button @click="fn">btn</button></h2>
  <child></child>
</template>

<!-- <script>
import { provide, ref } from "vue";
import Child from "./08-Child.vue";
export default {
  components: {
    Child,
  },
  setup() {
    // vue3的依赖注入是具有响应式的(传入的值必须是响应式的数据)
    const name = ref("lisi");
    const fn = () => {
      name.value = "wangwu";
    };

    // provide作为提供者，有两个参数，分别表示key和value
    provide("name", name);
    // provide("count", 3);

    return { name, fn };
  },
};
</script> -->

<script setup>
import { provide, ref } from "vue";
import Child from "./08-Child.vue";
const name = ref("lisi");
const fn = () => {
  name.value = "wangwu";
};
provide("name", name);
</script>
